<template>
  <div class="dashboard-container">
    <el-card>
      <PageTools>
        <template v-slot:before>
          <el-button
            v-if="checkPerm('addpages')"
            size="small"
            type="primary"
            @click="addFn"
          >添加页面</el-button>
        </template>
        <template v-slot:after>
          <div class="right">
            <el-input
              v-model="searchValue"
              style="width: 550px"
              placeholder="请输入关键字"
            />
            <el-button @click="search">筛选</el-button>
          </div>
        </template>
      </PageTools>

      <!-- table -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="content" label="内容" width="550">
          <template v-slot="{ row }">
            <span
              :label="row.content"
              :value="row.content"
              v-html="row.content"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="145">
          <template v-slot="{ row }">
            <el-button
              v-if="checkPerm('editpages')"
              size="small"
              type="primary"
              @click="editFn(row.id)"
            >编辑</el-button>
            <el-button
              v-if="checkPerm('delpages')"
              size="small"
              type="danger"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :page-size="size"
        :total="+total"
        layout="total,prev,pager,next"
        @current-change="currentChangeFn"
      />
    </el-card>
    <!-- 新增 -->
    <el-dialog
      :visible="dialogVisible"
      :title="formData.id ? '编辑页面' : '新增页面'"
      width="500px"
      @close="closeFn"
    >
      <!-- 表单 -->
      <el-form ref="form" label-width="50px" :rules="rules" :model="formData">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor v-model="formData.content" @blur="validate" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPageList,
  getPageCount,
  addPage,
  delPage,
  getPageDetail,
  editPage,
  searchPage,
  searchPageCount
} from '@/api/page'
export default {
  data() {
    return {
      total: 0,
      size: 5,
      page: 1,
      tableData: [],
      formData: {
        title: '',
        content: ''
      }, // 新增表单
      dialogVisible: false,
      searchValue: '',
      rules: {
        title: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getPageList()
    this.getPageCount()
  },
  methods: {
    // 获取列表
    async getPageList() {
      // console.log(59, this.page, this.size, this.total)

      const res = await getPageList({
        _limit: this.size,
        _start: (this.page - 1) * this.size
      })
      // console.log(63, res)
      this.tableData = res.data
      // console.log(66, this.tableData, this.total)
    },
    // 获取total
    async getPageCount() {
      const res = await getPageCount()
      this.total = res.data
      // console.log(100, res)
    },
    // 选择页码切换
    currentChangeFn(curPage) {
      this.page = curPage
      // console.log(106, curPage)
      this.getPageList()
    },
    addFn() {
      this.dialogVisible = true
    },
    validate() {
      // 手动校验内容
      this.$refs.form.validateField('content')
    },
    // 关闭
    closeFn() {
      this.$refs.form.resetFields() // 重置
      this.dialogVisible = false
    },
    confirmFn() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          if (this.formData.id) {
            await editPage(this.formData)
          } else {
            await addPage(this.formData)
            // console.log(117, res)
          }
          this.closeFn()
          await this.getPageList()
        } else {
          // 表单无效
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑
    async editFn(id) {
      this.dialogVisible = true
      const res = await getPageDetail(id)
      this.formData = res.data
      // console.log(147, id, res)
    },
    // 删除
    async delFn(id) {
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {})
        .then(async() => {
          // 点击确认
          await delPage(id)
          this.getPageList()
        })
        .catch(() => {
          // 点击取消
        })
    },
    async search() {
      console.log(this.searchValue)
      const res = await searchPage(this.searchValue)
      const res1 = await searchPageCount(this.searchValue)
      this.total = res1.data
      this.tableData = res.data
    }
  }
}
</script>

<style>
.right {
  display: inline-block;
  display: flex;
  justify-content: end;
}
.ql-editor {
  min-height: 150px;
}
</style>
